<template>
	<!-- 兑换记录 -->
	<view class="box">
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click.stop="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
			兑换记录
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text @click="fanhui" style="margin-left:75rpx">兑换记录</text>
			<!-- #endif -->
		</view>
		<view class="tit_list">
			<scroll-view class="list" :style="'height: calc(100vh - '+ curTop + 'px );'" scroll-y ='true' @scrolltolower="down"
				:scroll-top="scrollTop1" refresher-background="#f5f5f5">
				<view class="gift" v-for="(item,index) in Recommend" :key="item.id">
					<view class="title">
						{{item.activityName}}
					</view>
					<view class="article">
						<image class="image" :src="item.giftImage" mode=""></image>
						<view class="article_you">
							<view class="name">
								{{item.giftName}}
							</view>
							<view class="time">
								{{item.redemptionTime}}兑换
							</view>
							<view class="method">
								{{item.exchangeMethod ==2 ?'邮寄':'线下领取'}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="Recommend.length == 0" class="none">
					<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
					<view>没有更多数据了</view>
				</view>
				<view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
			</scroll-view>
		</view>
		<view v-if="scrollTop>0" class="hui" @click.stop="totop">
			<image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		mapGetters
	} from "vuex";
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	//#endif
	export default {
		data() {
			return {
				Recommend: [],
				imgUrl: this.$imgSrc,
				scrollTop: "0",
				scrollTop1: "0",
				trigger: false,
				downStatus: true,
				upStatus: true,
				userInfo: uni.getStorageSync("Pduser"),
				curTop:300,
				data:{
					userId:'',
					duration:'',
					pageNo:1,
					pageSize:10,
				}
			}
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		onLoad() {
			this.getRecommend()
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		onPageScroll: function(Object) {
			this.scrollTop = Object.scrollTop;
		},
		async onPullDownRefresh() {
			this.Recommend = [];
			this.data.pageNo = 1;
			this.downStatus = true;
			if (this.upStatus) {
				this.trigger = true;
				await this.getRecommend();
			}
		},
		methods: {
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			totop() {
				this.scrollTop1 = this.oldScrollTop;
				this.$nextTick(() => {
					this.scrollTop1 = 0;
				});
			},
			down() {
				if (this.downStatus) {
					this.data.pageNo++;
					this.getRecommend();
				}
			},
			async up() {
				this.Recommend = [];
				this.data.pageNo = 1;
				this.downStatus = true;
				if (this.upStatus) {
					this.trigger = true;
					await this.getRecommend();
				}
			},
			getRecommend() {
				let that =this
				this.upStatus = false;
				this.data.userId =this.userInfo.id
				this.$myRequest.get("/api/mobile/public/getObtainRedemptionRecordsTabulation", this.data).then(res => {
					if (!res.obtainRedemptionRecords.length) {
						this.downStatus = false;
					}
					this.upStatus = true;
					this.trigger = false;
					res.obtainRedemptionRecords.pageList.forEach(v=>{
						v.active = false
					})
					this.Recommend = this.Recommend.concat(res.obtainRedemptionRecords.pageList);
					uni.stopPullDownRefresh();
					
					this.$nextTick(function() {
						uni.createSelectorQuery().in(this).select('.list').boundingClientRect(result => {
							if (result) {
								that.curTop = result.top
							}
						}).exec();
					})
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;

		/* #endif */
		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 28rpx;
			/* #ifdef MP-WEIXIN */
			position: initial;
			margin-left: auto;
			margin-right: 200rpx;
			/* #endif */
			bottom: 16rpx !important;
			right: 30rpx;
			// #ifdef APP
			// top: 50%;
			// #endif
		}
	}

	.tit {
		margin: 0 30rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.view {
			font-size: 36rpx;
			font-weight: 550;
			color: #18A291;
		}

		.tit_right {
			display: flex;
			align-items: center;

			.sort {
				font-size: 32rpx;
				margin-right: 26rpx;
				position: relative;

				span {
					margin-left: 8rpx;
					font-size: 20rpx;
				}

				.administrations {
					width: 210rpx;
					height: 240rpx;
					background-color: #fff;
					position: absolute;
					right: 0rpx;
					bottom: -260rpx;
					box-shadow: 0px 0px 20px 1px #D0D0D0;
					z-index: 100;
					padding: 0 32rpx;
					display: flex;
					flex-direction: column;

					.items {
						height: 94rpx;
						color: #5A5E66;
						font-size: 28rpx;
						border-bottom: 1px solid #E0E0E0;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					&::before {
						content: '';
						display: inline-block;
						border-left: 24rpx solid transparent;
						border-right: 20rpx solid transparent;
						border-bottom: 24rpx solid #fff;
						position: absolute;
						right: 12rpx;
						top: -22rpx;
					}
				}
			}

			.sai {
				font-size: 32rpx;

				span {
					margin-left: 8rpx;
					font-size: 20rpx;
				}
			}
		}
	}

	.tit_list {
		margin-left: 30rpx;
		margin-right: 30rpx;
		width: 690rpx;
		.gift{
			padding-bottom: 20rpx;
			border-bottom: 1px solid #ccc;
			margin-top: 20rpx;
			.title{
				font-size: 30rpx;
				font-weight: 550;
				color: #333333;
				margin-bottom: 20rpx;
			}
			.article{
				display: flex;
				align-items: center;
				.image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}
				.article_you{
					height: 160rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					.name{
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
					.time{
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
					}
					.method{
						font-size: 28rpx;
						font-weight: 400;
						color: #64B6A8;
					}
				}
			}
		}
	}

	.hui {
		position: fixed;
		right: 30rpx;
		bottom: 154rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 34rpx;
		font-size: 26rpx;
		box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

		image {
			width: 46rpx;
			height: 46rpx;
			margin-right: 18rpx;
		}
	}
	.down {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.none {
		text-align: center;

		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}

		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}
</style>